<template>
    <div class="app-container">
        <el-card class="box-card">
            <!-- 卡片头-->
            <div slot="header" class="clearfix">
                <span style="line-height: 32px">项目节点配置</span>
                <el-button style="float: right;"
                           v-if="userButtonIds.indexOf('baseSet.proNode.add') != -1"
                           type="primary"
                           icon="el-icon-plus"
                           size="small"
                           @click="add_projectNode_button">新增项目节点
                </el-button>
            </div>

            <!-- 表格-->
            <el-table
                    :data="projectNodes"
                    border
                    size="small"
                    :header-cell-style="tableHeaderStyle"
                    style="width: 100%">
                <el-table-column
                        fixed
                        type="index"
                        label="No."
                        header-align="center"
                        align="center"
                        width="50">
                    <template slot-scope="scope">
                        {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed
                        prop="typeName"
                        label="研发类型"
                        width="200"
                        :show-overflow-tooltip="true"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        header-align="center"
                        label="业务流程">
                    <template slot-scope="scope">
                        <div style="display: flex;overflow-x: auto;overflow-y:hidden">
                            <div v-for="(item,index) in scope.row.proNodeList"  :key="index">
                                <proLine
                                        :first="index == 0 ? true : false"
                                        :name="getPromptName(scope.row.proNodeList,index)"
                                        :line="getPromptLine(scope.row.proNodeList,index)"
                                        :arrowhead="getPromptArrowhead(scope.row.proNodeList,index)">
                                </proLine>

                                <div style="margin-top: 2px">
                                    <my_stepbox
                                            :inputValue="item.nodeName"
                                            :id="index"
                                            @handleClose="abc">
                                    </my_stepbox>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="130"
                        align="center"
                        v-if="userButtonIds.indexOf('baseSet.proNode.edit') != -1 || userButtonIds.indexOf('baseSet.proNode.delete') != -1"
                        header-align="center">
                    <template slot-scope="scope">
                        <el-button @click="editPorjectNode(scope.row)"
                                   type="text"
                                   v-if="userButtonIds.indexOf('baseSet.proNode.edit') != -1"
                                   size="small">编辑
                        </el-button>
                        <el-button type="text"
                                   @click="deletedProjectNode(scope.row.id)"
                                   v-if="userButtonIds.indexOf('baseSet.proNode.delete') != -1"
                                   size="small">移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页-->
            <div style="text-align:right;margin-top: 20px">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="page.pageSize"
                        @current-change="changPageCurrent"
                        :total="page.pageCount">
                </el-pagination>
            </div>

            <el-drawer
                    title="新增项目节点"
                    size="40%"
                    :visible.sync="addDrawerFlag"
                    :direction="direction">
                <div class="app-container drawer-div">
                    <el-form
                            :model="projectNode"
                            ref="dynamicValidateForm"
                            label-position="right"
                            label-width="100px"
                            class="demo-dynamic"
                            size="small">
                        <el-form-item
                                prop="typeName"
                                label="研发类型"
                                :rules="[
                                    { required: true, message: '请输入研发类型', trigger: 'blur' },
                                    {  max: 50, message: '最多50个字符',trigger: 'blur' }]">
                            <el-input v-model.trim="projectNode.typeName" maxLength="50" placeholder="请输入研发类型"></el-input>
                        </el-form-item>
                        <el-form-item
                                prop="typeCode"
                                label="类型编码"
                                :rules="[
                                    { required: true, message: '请输入类型编码', trigger: 'blur' },
                                    {  min: 0,max: 20, message: '最多20个字符',trigger: 'blur' }  ]">
                            <el-input v-model.trim="projectNode.typeCode" maxLength='20' placeholder="请输入类型编码"></el-input>
                        </el-form-item>
                        <el-form-item
                                v-for="(item, index) in projectNode.proNodeList"
                                :label="'流程节点' + (index+1)"
                                :key="item.key"
                                :prop="'proNodeList.' + index + '.nodeName'"
                                :rules="[
                                    {required: true, message: '请输入流程节点', trigger: 'blur'},
                                    {min: 0,max: 50, message: '最多50个字符',trigger: 'blur' }]">
                            <el-input
                                    v-model.trim="item.nodeName"
                                    maxLength="50"
                                    placeholder="请输入流程节点"
                                    style="width: 50%">
                            </el-input>
                            <span style="margin-left: 5px">排序</span>
                            <el-input-number
                                    v-model="sortIndexs[index]"
                                    :min="1"
                                    :step="1"
                                    :max="9999"
                                    maxLength="4"
                                    style="width: 25%;margin-left: 5px">
                            </el-input-number>
                            <el-button @click.prevent="removeDomain(item,index)" type="danger" icon="el-icon-minus"
                                       style="float: right;margin-right: 10px"></el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="addDomain" type="primary" icon="el-icon-plus"></el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="demo-drawer__footer">
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                    <el-button @click="cancelDrawer('dynamicValidateForm')">取消</el-button>
                </div>
            </el-drawer>
            <el-drawer
                    title="编辑项目节点"
                    size="40%"
                    :visible.sync="editDrawerFlag"
                    @close="editDrawerClose"
                    :direction="direction">
                <div class="app-container drawer-div">
                    <el-form
                            :model="projectNode"
                            ref="dynamicValidateForm"
                            label-position="right"
                            label-width="100px"
                            class="demo-dynamic"
                            size="small">
                        <el-form-item
                                prop="typeName"
                                label="研发类型"
                                :rules="[
                                    { required: true, message: '请输入研发类型', trigger: 'blur' },
                                    {  max: 50, message: '最多50个字符',  trigger: 'blur'}]">
                            <el-input v-model.trim="projectNode.typeName" max-length="50" placeholder="请输入研发类型"></el-input>
                        </el-form-item>
                        <el-form-item
                                prop="typeCode"
                                label="类型编码"
                                :rules="[
                                    { required: true, message: '请输入类型编码', trigger: 'blur' },
                                    {  min: 0,max: 20, message: '最多20个字符',trigger: 'blur' }]">
                            <el-input v-model.trim="projectNode.typeCode" maxLength='20' placeholder="请输入类型编码"></el-input>
                        </el-form-item>
                        <el-form-item
                                v-for="(item, index) in projectNode.proNodeList"
                                :label="'流程节点' + (index+1)"
                                :key="item.key"
                                :prop="'proNodeList.' + index + '.nodeName'"
                                :rules="[
                                    {required: true, message: '请输入流程节点', trigger: 'blur'},
                                    {min: 0,max: 50, message: '最多50个字符',trigger: 'blur' }]">
                            <el-input
                                    v-model.trim="item.nodeName"
                                    maxLength="50"
                                    placeholder="请输入流程节点"
                                    style="width: 50%">
                            </el-input>
                            <span style="margin-left: 5px">排序</span>
                            <el-input-number
                                    v-model="sortIndexs[index]"
                                    :min="1"
                                    :max="9999"
                                    :step="1"
                                    maxLength="4"
                                    style="width: 25%;margin-left: 5px">
                            </el-input-number>
                            <el-button @click.prevent="removeDomain(item,index)" type="danger" icon="el-icon-minus"
                                       style="float: right;margin-right: 10px"></el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="addDomain" type="primary" icon="el-icon-plus"></el-button>
                        </el-form-item>

                    </el-form>
                </div>
                <div class="demo-drawer__footer">
                    <el-button type="primary" @click="editPorjectSubmit('dynamicValidateForm')">提交</el-button>
                    <el-button @click="cancelDrawer('dynamicValidateForm')" style="">取消</el-button>
                </div>
            </el-drawer>
        </el-card>
    </div>

</template>

<script>
import {Message} from 'element-ui'
import {tableHeaderStyle,} from '@/utils/constant'
import my_stepbox from '@/components/StepBox/index'
import proLine from '@/components/ProLine/index'

import {
    http_projectNode_list,
    http_projectNode_add,
    http_projectNode_edit,
    http_projectNode_deleted
} from '@/api/projectNode'

export default {
    name: "projectNode",
    components: {
        my_stepbox,
        proLine,
    },
    data() {
        return {
            tableHeaderStyle: tableHeaderStyle,
            userButtonIds: JSON.parse(localStorage.getItem("user")).buttonIds,
            addDrawerFlag: false,
            editDrawerFlag: false,
            direction: 'rtl',
            projectNodes: [],
            page: {
                pageNum: null,
                pageSize: null,
                pageCount: null,
            },
            projectNode: {
                typeName: null,
                typeCode: null,
                proNodeList: [{
                    nodeName: null,
                    key: null,
                    sort: null,
                }],
            },
            nodeNams: [],
            sortIndexs: [1],


            dynamicValidateForm: {
                domains: [{
                    value: ''
                }],
                email: ''
            }
        }
    },
    computed:{

    },
    methods: {
        selectProjects() {
            http_projectNode_list(this.page).then(result => {
                const {data} = result
                console.log(result)
                this.projectNodes = data.records;
                this.page = {
                    pageNum: data.current,
                    pageSize: data.size,
                    pageCount: data.total,
                }
            })
        },
        addProject() {
            http_projectNode_add(this.projectNode).then(result => {
                const { message, stateCode} = result
                if (stateCode == '0000') {
                    Message.success(message)
                    this.addDrawerFlag = false
                    this.selectProjects()
                } else {
                    Message.error(message)
                }
            })
        },
        editProject() {
            http_projectNode_edit(this.projectNode).then(result => {
                const {message, stateCode} = result
                if (stateCode == '0000') {
                    Message.success(message)
                    this.editDrawerFlag = false
                    this.selectProjects()
                } else {
                    Message.error(message)
                }
            })
        },
        http_projectNode_deleted(id) {
            http_projectNode_deleted(id).then(result => {
                const { message, stateCode} = result
                if (stateCode == '0000') {
                    Message.success(message)
                    this.selectProjects()
                } else {
                    Message.error(message)
                }
            })
        },
        deletedProjectNode(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.http_projectNode_deleted(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        add_projectNode_button() {
            if (this.$refs['dynamicValidateForm'] != null) {
                this.$refs['dynamicValidateForm'].clearValidate()
            }
            this.projectNode = {
                typeName: null,
                typeCode: null,
                proNodeList: [{
                    nodeName: null,
                    key: null,
                    sort: null,
                }],
            }
            this.sortIndexs = [1]
            this.addDrawerFlag = true
        },
        // 回调
        abc(val) {
            // console.log(val);
        },
        // 添加页面
        submitForm(formName) {
            this.projectNode.proNodeList.forEach((item, index) => {
                this.sortIndexs.forEach((sort, i) => {
                    if (i == index) {
                        item.sort = sort
                    }
                })
            })

            let list = this.projectNode.proNodeList;
            for (let i = 0; i < list.length; i++) {
                for (let j = i + 1; j < list.length; j++) {
                    if (list[j].sort < list[i].sort) {
                        let x = list[i]
                        list[i] = list[j]
                        list[j] = x
                    }
                }
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addProject()
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        editPorjectSubmit(formName) {
            this.projectNode.proNodeList.forEach((item, index) => {
                this.sortIndexs.forEach((sort, i) => {
                    if (i == index) {
                        item.sort = sort
                    }
                })
            })

            let list = this.projectNode.proNodeList;
            for (let i = 0; i < list.length; i++) {
                for (let j = i + 1; j < list.length; j++) {
                    if (list[j].sort < list[i].sort) {
                        let x = list[i]
                        list[i] = list[j]
                        list[j] = x
                    }
                }
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.editProject()
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeDomain(item, index) {
            console.log("index1",index)
            this.sortIndexs.splice(index, 1)
            var i = this.projectNode.proNodeList.indexOf(item)
            console.log("index2",index)
            if (i !== -1) {
                this.projectNode.proNodeList.splice(index, 1)
            }
        },
        addDomain() {
            this.sortIndexs.push(this.sortIndexs.length + 1)
            this.projectNode.proNodeList.push({
                nodeName: '',
                key: Date.now()
            });
        },
        editPorjectNode(param) {
            if (this.$refs['dynamicValidateForm'] != null) {
                this.$refs['dynamicValidateForm'].clearValidate()
            }
            this.projectNode = param
            let length = this.projectNode.proNodeList.length;
            this.sortIndexs = []
            for (let i = 0; i < length; i++) {
                this.sortIndexs.push(i + 1)
            }
            this.editDrawerFlag = true
        },
        cancelDrawer() {
            this.addDrawerFlag = false
            this.editDrawerFlag = false
        },
        changPageCurrent(val) {
            // console.log(val)
            this.page.pageNum = val
            // console.log(this.page.pageNum)
            this.selectProjects()
        },
        editDrawerClose() {
            this.selectProjects()
        },
        getPromptName(list,index){
            let promptName = null
            if (index == 0) promptName='开始节点'
            if (list.length > 2 && index == 1) promptName = '过程节点'
            if (list.length == 2 && index == 1) promptName = '终止节点'
            if (list.length > 2 && index == list.length -1 ) promptName='终止节点'
            return promptName
        },
        getPromptLine(list,index){
            let status =false;
           if (index != list.length -1) {
                status= true
            }
            return status;
        },
        getPromptArrowhead(list,index){
            let status =false;
            if (index == list.length -1 && list.length >1) {
                status = true
            }
            if (list.length > 1 && index == 1){
                status = true
            }
            return status;
        }


    },
    created() {
        this.selectProjects()
    }

}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}

.el-table th.gutter {
    display: table-cell !important
}

.el-drawer__header span:focus {
    outline: 0 !important;
}

.demo-drawer__footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background-color: white;
    text-align: center;
    z-index: 10000;
}

.drawer-div {
    height: 83vh;
    overflow-y: auto
}
</style>

<style lang="less" scoped>

/*去掉打开抽屉时自动选中标题时的蓝色边框*/
/deep/.el-drawer__header span:focus {
    outline: 0;
}

</style>


